使用模板引擎

模板引擎使你可以在应用程序中使用静态模板文件,在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为发送到客户端的HTML文件,这种方法可以更轻松地设计HTML页面。

一些与Express一起使用的流行模板引擎是PugMustacheEJSExpress应用程序生成器使用Jade作为其默认值,但它也支持其他几个。

有关可与Express一起使用的模板引擎列表,请参阅模板引擎(Express wiki),另请参阅比较JavaScript模板引擎:Jade、Moustache、Dust等

注意:Jade已更名为Pug,你可以继续在你的应用中使用Jade,它可以正常工作,但是,如果你想要模板引擎的最新更新,则必须在应用程序中将Jade替换为Pug。

要渲染模板文件,请设置以下应用程序设置属性,在由生成器创建的默认应用程序app.js中设置:

  • views,模板文件所在的目录,例如:app.set('views', './views'),默认为应用程序根目录中的views目录。
  • view engine,使用的模板引擎,例如,要使用Pug模板引擎:app.set('view engine', 'pug')

然后安装相应的模板引擎npm包,例如安装Pug:

$ npm install pug --save
兼容Express的模板引擎(如Jade和Pug)导出名为__express(filePath, options, callback)的函数,该函数由res.render()函数调用以渲染模板代码。

某些模板引擎不遵循此约定,Consolidate.js库遵循此约定,映射所有流行的Node.js模板引擎,因此可以在Express中无缝工作。

设置视图引擎后,你不必在应用程序中指定引擎或加载模板引擎模块,Express在内部加载模块,如下所示(对于上面的示例)。

app.set('view engine', 'pug')

views目录中创建一个名为index.pug的Pug模板文件,其中包含以下内容:

html
  head
    title= title
  body
    h1= message

然后创建一个路由来渲染index.pug文件,如果未设置view engine属性,则必须指定视图文件的扩展名,否则,你可以省略它。

app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

当你向主页发出请求时,index.pug文件将渲染为HTML。

注意:视图引擎缓存不会缓存模板输出的内容,只缓存底层模板本身,即使缓存已打开,仍会每个请求重新渲染视图。

要了解有关模板引擎如何在Express中工作的更多信息,请参阅:“为Express开发模板引擎”。


上一篇:使用中间件
下一篇:错误处理

博弈
2.5k 声望1.5k 粉丝

态度决定一切